
<script>
import dmbForm from "@/components/DmbForm";
import dmbTable from "@/components/LTable/index.vue";
import {
  formBase,
  tableBase,
  cellStyle,
  headerCellStyle,
  tableFormStyle,
  formItemStyle,
} from "./config";
import { mapState } from "vuex";
import dayjs from "dayjs";
import store from "@/store";
const defaultForm = {
  startTime: "",
  endTime: "",
  userId: "",
  store: "",
};
import { customsClearanceCompany_ListAPI } from "@/api/data/customs-clearance-company.js";
import {
  reviewedByIdAPI,
  addBankTransferRecordAPI,
} from "@/api/payment/bank_transfer_record.js";
import { bank_account_listAPI } from "@/api/payment/bank_account.js";
export default {
  name: "bank_transfer_record",
  computed: {
    ...mapState({
      company: (state) => state.custom_dict.company,
      shop: (state) => state.custom_dict.shop,
    }),
    formItemStyle() {
      return formItemStyle;
    },
    tableFormStyle() {
      return tableFormStyle;
    },
    cellStyle() {
      return cellStyle;
    },
    headerCellStyle() {
      return headerCellStyle;
    },
  },
  components: { dmbTable, dmbForm },
  data() {
    return {
      propsSearchForm: { ...defaultForm },
      rebase: formBase,
      requestConfig: {
        url: "/payment/bankTransferRecord/queryBankTransferRecordList",
        method: "get",
        montage: true,
      },
      selectionArr: [], // 多选框内容
      selectionArr2: [], // 多选框内容
      tableSearchForm: { ...defaultForm },
      listUser: [],
      customsClearanceCompany_List: [],
      voucherPictureUrlVisible: false,
      current_picture: false,
      bankTransferDialog: false,
      // 代客转账
      bankTransferForm: {},
      PictureUrl: "",
      bank_account_list: [], //银行列表
      rules: {
        bankName: [{ required: true, message: "请选择银行", trigger: "blur" }],
        telephone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
            message: "请输入正确的手机号",
            trigger: "blur",
          },
        ],
        rmbAmountOfMoney: [
          {
            required: true,
            message: "请输入人民币金额",
            trigger: "blur",
          },
        ],
        paymentName: [
          { required: true, message: "请输入付款人姓名", trigger: "blur" },
        ],
        userId: [{ required: true, message: "请输入客户ID", trigger: "blur" }],
        currency: [{ required: true, message: "请选择币别", trigger: "blur" }],
        voucherPicture: [
          { required: true, message: "请上传凭证图片", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    bank_account_listAPI({ pageSize: 9999999999, pageNum: 1 })
      .then((res) => {
        this.bank_account_list = res.rows;
      })
      .catch((err) => {});
  },
  methods: {
    tableBase() {
      return tableBase;
    },
    // 导出
    async downLoad() {
      console.log(1, this.selectionArr);
      if (this.selectionArr.length > 0) {
        const ids = this.selectionArr.map((v) => v.id);
        this.download(
          "/payment/bankTransferRecord/export",
          {
            ids,
          },
          `转账记录_${dayjs().format("YYYY-MM-DD HH:mm:ss")}.xlsx`
        );
      } else {
        this.$message.error("请选择条数据导出");
      }
    },
    // 多选框内容
    selectionChange(data) {
      this.selectionArr = data;
    },
    isPass(isPass) {
      if (!this.selectionArr.length)
        return this.$message.error("请先选择一条数据");
      if (!(this.selectionArr.length === 1))
        return this.$message.error("一次只能审批一个银行转账记录");
      if (!(this.selectionArr[0].isPass === -1))
        return this.$message.error("该转账记录已审核");
      reviewedByIdAPI({ id: this.selectionArr[0].id, isPass }).then((res) =>
        this.$message.success(res.msg)
      );
    },
    addBankTransfer() {
      console.log("表", this.bankTransferForm);
      this.$refs.bankTransferForm.validate((res) => {
        if (res) {
          const form = new FormData();
          for (let key in this.bankTransferForm) {
            this.bankTransferForm[key] &&
              form.append(`${key}`, this.bankTransferForm[key]);
          }
          addBankTransferRecordAPI(form).then((res) => {
            this.$message.success(res.msg);
            this.bankTransferDialog = false;
          });
        }
      });
    },
    picSelect(e) {
      console.log(e, 1);
      console.log(e.target.files[0], 1);
      this.bankTransferForm.voucherPicture = e.target.files[0]; // 文件对象
      const reader = new FileReader();
      reader.onload = (e) => {
        // e.target.result 包含了图片的Base64数据
        this.PictureUrl = e.target.result;
      };
      reader.readAsDataURL(e.target.files[0]);
    },
    dialogClose() {
      this.bankTransferForm = {};
      this.PictureUrl = "";
      this.$nextTick(() => this.$refs.bankTransferForm.clearValidate());
    },
  },
  watch: {
    propsSearchForm: {
      deep: true,
      handler: function (value) {
        this.tableSearchForm = { ...value };
        delete this.tableSearchForm.shelfTime;
        // 日期
        if (!value?.shelfTime?.length) {
          this.tableSearchForm.startDate = "";
          this.tableSearchForm.endDate = "";
        } else if (value?.shelfTime?.length) {
          this.tableSearchForm.startDate = dayjs(value.shelfTime[0]).format(
            "YYYY-MM-DD HH:mm:ss"
          );
          this.tableSearchForm.endDate = dayjs(value.shelfTime[1]).format(
            "YYYY-MM-DD HH:mm:ss"
          );
        }
        // 店铺
        if (value.store) {
          const obj = this.shop.find((item) => {
            return item.id == value.store;
          });
          this.tableSearchForm.store = obj ? obj.shopName : "";
        }
      },
    },
  },
};
</script>
<template>
  <div>
    <div class="overflow-auto">
      <dmb-form
        ref="form"
        :form-items="rebase"
        :model-value="propsSearchForm"
        :item-style="formItemStyle"
      @update="(row) => (propsSearchForm = row)"
      >
        <template v-slot:header="row" class="flex flex-row-reverse">
          <div class="mb-3 flex flex-row-reverse">
            <div>
              <el-button type="success" @click="$refs.table.getListData()"
                >查询</el-button
              >
              <el-button type="primary" @click="downLoad">导出</el-button>
              <!--  "isPass": 通过为1，不通过为0 -->
              <el-button type="primary" @click="isPass(0)">不通过</el-button>
              <el-button type="primary" @click="isPass(1)">通过</el-button>
              <el-button type="primary" @click="bankTransferDialog = true"
                >代客转账</el-button
              >
            </div>
          </div>
        </template>
      </dmb-form>
    </div>
    <dmb-table
      ref="table"
      :CustomDoubleClick="true"
      :prop-list="tableBase()"
      :show-index-column="true"
      select-column-type="CHECKBOX"
      :props-search-form="tableSearchForm"
      :req-request="requestConfig"
      select-key="id"
      :cell-style="cellStyle"
      :header-cell-style="headerCellStyle"
      :initialize="false"
      :change-search-form="false"
      :show-footer="true"
      :form-item-style="tableFormStyle"
      @selectionChange="
        (row) => {
          selectionArr = row;
        }
      "
    >
      <!-- 是否通过（-1=未审核，0=未通过，1=已通过） -->
      <template v-slot:ispass="{ row }">
        <span v-if="row.isPass === -1">未审核</span>
        <span class="text-[red]" v-if="row.isPass === 0">未通过</span>
        <span class="text-[#13ce66]" v-if="row.isPass === 1">已通过</span>
      </template>
      <!-- 凭证图片地址 -->
      <template v-slot:voucherPictureUrl="{ row }">
        <img
          @click="
            current_picture = row.voucherPictureUrl;
            voucherPictureUrlVisible = true;
          "
          :src="row.voucherPictureUrl"
          class="h-[4em] w-[4em]"
          alt=""
        />
      </template>
    </dmb-table>
    <el-dialog
      title="凭证图片"
      :visible.sync="voucherPictureUrlVisible"
      width="30%"
    >
      <img :src="current_picture" class="h-[40em] w-[40em]" alt="" />
    </el-dialog>

    <el-dialog
      @close="dialogClose"
      width="30%"
      title="代客转账"
      :visible.sync="bankTransferDialog"
    >
      <el-form
        label-position="left"
        :model="bankTransferForm"
        :rules="rules"
        ref="bankTransferForm"
        label-width="200px"
        class="demo-ruleForm"
      >
        <el-row>
          <el-col :span="20">
            <el-form-item label="银行名称" prop="bankName">
              <el-select
                v-model="bankTransferForm.bankName"
                placeholder="请选择银行名称"
              >
                <el-option
                  v-for="item in bank_account_list"
                  :key="item.id"
                  :label="item.bankName"
                  :value="item.bankName"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="20">
            <el-form-item label="联系电话" prop="telephone">
              <el-input
                placeholder="请输入联系电话"
                v-model="bankTransferForm.telephone"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="20">
            <el-form-item label="人民币金额" prop="rmbAmountOfMoney">
              <el-input-number
                :precision="2"
                :min="1.0"
                v-model="bankTransferForm.rmbAmountOfMoney"
                controls-position="right"
              ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="20">
            <el-form-item label="币别">
              <el-select
                placeholder="请选择币别"
                v-model="bankTransferForm.currency"
              >
                <el-option
                  v-for="item in 3"
                  :key="item"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="20">
            <el-form-item label="转换的币别金额" prop="currencyAmountConverted">
              <el-input-number
                :precision="2"
                :min="1.0"
                v-model="bankTransferForm.currencyAmountConverted"
                controls-position="right"
              ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="20">
            <el-form-item label="付款人姓名" prop="paymentName">
              <el-input
                placeholder="请输入付款人姓名"
                v-model="bankTransferForm.paymentName"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="20">
            <el-form-item label="客户ID" prop="userId">
              <el-input
                placeholder="请输入客户ID"
                v-model="bankTransferForm.userId"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="20">
            <el-form-item label="备注">
              <el-input
                type="textarea"
                placeholder="请输入备注"
                v-model="bankTransferForm.remark"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="20">
            <el-form-item label="图片">
              <div
                class="w-full h-40 relative"
                @click="
                  () => {
                    $refs.imgInput.click();
                  }
                "
              >
                <input
                  ref="imgInput"
                  class="hidden absolute top-0 left-0 bottom-0 right-0 index-9"
                  type="file"
                  id="imageInput"
                  @change="picSelect"
                  accept="image/*"
                />
                <!-- class="absolute top-0 left-0 bottom-0 right-0 index-8" -->
                <img
                  class="w-full h-40"
                  ref="voucherPicture"
                  :src="PictureUrl"
                  alt="请上传凭证图片"
                />
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer text-center">
        <el-button @click="bankTransferDialog = false">取 消</el-button>
        <el-button type="primary" @click="addBankTransfer">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.son {
  overflow: auto;
}
</style>
